<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' }
        ]"
      >
        <el-input
          type="age"
          v-model.number="numberValidateForm.age"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <p ref="box">点击显示</p>
    <canvas
      id="thumsCanvas"
      width="200"
      height="400"
      style="width: 100px; height: 200px"
    ></canvas>
  </div>
</template>

<script>
import ThumbsUpAni from '../assets/canvas'
export default {
  data() {
    return {
      activeName: 'first',
      numberValidateForm: {}
    }
  },
  created() {
    this.$nextTick(this.fn)
  },
  mounted() {
    const thumbsUpAni = new ThumbsUpAni()
    setInterval(() => {
      thumbsUpAni.start()
    }, 300)
  },
  methods: {
    fn() {
      console.log(this.$refs.box)
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.$refs[formName].resetFields()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style>
div {
  box-sizing: border-box;
}
.el-tabs {
  width: 75%;
  margin: 0 auto;
}
.el-tabs__item {
  width: 160px;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 24px;
  color: #e05132 !important;
}
.el-tabs__header {
  width: 320px !important;
  border: 1px solid #e05132 !important;
  border-radius: 24px;
  margin: 0 auto !important;
  display: block;
  box-sizing: content-box;
}
.el-tabs__header .is-top {
  border: none !important;
}
.el-tabs__item,
.is-active {
  border: none !important;
}
.is-active {
  background-color: #ea5532;
  color: #fff !important;
}
</style>>
